// vue-router是vue的插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/HomeView.vue'
import About from '../views/AboutView.vue'
import Backend from '../views/BackendView.vue'
import Detail from '../views/DetailView.vue'

// 通过Vue.use()方法使用vue-router的插件
Vue.use(VueRouter)

const router = new VueRouter({
  // 配置对象中的routes属性是不能乱写的，他表示路由配置
  routes: [
    {
      // 路径 要加 /
      path: '/',
      // component表示上面路径匹配的组件
      component: Home,
      // 给路由规则取名字
      name: 'Home',
      children: [
        {
          // 子路由规则注意不要加 /
          path: 'front',
          component: () => import(/* webpackChunkName: "front" */ '../views/FrontView.vue'),
          name: 'Front'
        },
        {
          path: 'backend',
          component: Backend,
          name: 'Backend'
          // meta: { role: ['admin', 'boss'] }
        },
        {
          // 定义路由参数 通过 /:参数名定义
          path: 'detail/:id',
          component: Detail,
          name: 'Detail',
          props: route => ({ user: 'jack', id: route.params.id })
        }
      ]
    },
    {
      // 路径 要加 /
      path: '/about',
      // component表示上面路径匹配的组件
      component: About,
      // 给路由规则取名字
      name: 'About'
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

// const token = 'xcvsfehsklhoau3r4ouoho'
// 在身份认证的时候用
router.beforeEach((to, from, next) => {
  // if (token) {
  //   next()
  // } else {
  //   next('/login')
  // }
  // const currentRole = 'admin'
  // if (to.meta.role.indexOf(currentRole) === -1) {
  //   next(false)
  // } else {
  //   next()
  // }
  next()
})

// 导出router实例
export default router
